<!DOCTYPE html>
<html>
<head>
    {include file="public/header" /}
    <link rel="stylesheet" href="/static/admin/voucher.css">
    <link rel="stylesheet" type="text/css" href="/static/taginput/css/normalize.css" /><!--CSS RESET-->
    <link rel="stylesheet" href="/static/taginput/src/jquery.tagsinput-revisited.css" />
    <!--<link rel="stylesheet" href="/static/layuimini/lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">-->
</head>
<body>
<div style="padding-top:10px;" class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">商品名称</label>
        <div class="layui-input-block">
            <input type="text" name="pro_title" lay-verify="required" lay-reqtext="商品名称不能为空" placeholder="请输入商品名称" value="" class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">商品类型</label>
        <div class="layui-input-block">
            <input type="radio" name="pro_type" lay-filter="pro_type" value="1" title="余额" checked="">
            <input type="radio" name="pro_type" lay-filter="pro_type" value="2" title="恢复材料">
            <input type="radio" name="pro_type" lay-filter="pro_type" value="3" title="卡券">
        </div>
    </div>
    <div class="layui-form-item layui-form-text" id="showContext">
        <label class="layui-form-label">金额</label>
        <div class="layui-input-block">
            <input type="number" name="pro_number" min="0" lay-verify="required"  value="" class="layui-input" autocomplete="off">
        </div>

        <!--<label class="layui-form-label">数量</label>-->
        <!--<div class="layui-input-block">-->
            <!--<input type="number" name="pro_number" min="1" lay-verify="required"  value="" class="layui-input">-->
        <!--</div>-->


        <!--<label class="layui-form-label">选择卡券</label>-->
        <!--<div class="layui-input-block" style="display: flex">-->
            <!--<button class="layui-btn" onclick="checkVoucher()">点击添加</button>-->
            <!--<input type="hidden" name="voucher_id" id="voucher_id">-->
            <!--<div style="margin-left:10px;padding-top:10px;" id="voucherShow"></div>-->
        <!--</div>-->

    </div>
    <div class="layui-form-item layui-form-text" id="period" style="display: none">
        <label class="layui-form-label">有效期</label>
        <div class="layui-input-block">
            <input type="number" name="period" min="1"   value="" class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">所需积分</label>
        <div class="layui-input-block">
            <input type="number" name="integral_num" min="1" lay-verify="required"  value="" class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">上架数量</label>
        <div class="layui-input-block">
            <input type="number" name="pro_num" min="1" lay-verify="required"  value="" class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">限购数量</label>
        <div class="layui-input-block">
            <input type="number" name="limit_num" min="1" lay-verify="required"  value="" class="layui-input" autocomplete="off">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上架时间</label>
        <div class="layui-input-inline">
            <input type="text" name="putaway_time" id="start_time"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">下架时间</label>
            <div class="layui-input-inline">
                <input type="text" name="under_time" id="end_time"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <!--<div class="layui-form-item layui-form-text">-->
        <!--<label class="layui-form-label">标签</label>-->
        <!--<div class="layui-input-block">-->
            <!--<input type="text" id="form-tags-1" name="tages_name"   value="" class="layui-input" autocomplete="off">-->
        <!--</div>-->
    <!--</div>-->
    <div class="layui-form-item">
        <label class="layui-form-label">缩略图上传</label>
        <input type="hidden" id="imgurlHidden" name="imgurl" value="">
        <div class="layui-input-inline uploadHeadImage">
            <div class="layui-upload-drag" id="headImg">
                <i class="layui-icon"></i>
                <p>点击上传图片，或将图片拖拽到此处</p>
            </div>
        </div>
        <div class="layui-input-inline">
            <div class="layui-upload-list" style="margin-top: 5px;">
                <img class="layui-upload-img headImage" style="height: 100px;" src="" id="imgurl">
                <p id="demoText"></p>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">banner上传</label>
        <input type="hidden" id="banner_images" name="bannerurl">
        <div class="layui-upload">
            <div class="layui-form-mid layui-word-aux">
                <button type="button" class="layui-btn" id="multiple_banner">多图片上传</button>
                <span class="x-red">*</span>为保证图片质量，轮播图片请尽量选择200*200的方形图片,图片大小不要超过500KB,一般在30KB-100KB之间
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                    预览：
                    <div class="layui-upload-list" id="div-slide_show"></div>
                </blockquote>
            </div>
        </div>
    </div>
    <!--<div class="layui-form-item layui-form-text">-->
        <!--<label class="layui-form-label">详情上传</label>-->
        <!--<div class="layui-input-block">-->
            <!--<div class="layui-textarea" id='LAY_demo_editor' ></div>-->
            <!--<input type="hidden" id="editorimgurlHidden"  name="editor_imgs" value="" >-->
        <!--</div>-->
    <!--</div>-->
    <div class="layui-form-item ">
        <label class="layui-form-label">详情上传</label>
        <input type="hidden" id="detailHidden" name="detailurl" value="">
        <div class="layui-input-inline uploadHeadImage">
            <div class="layui-upload-drag" id="detailImg">
                <i class="layui-icon"></i>
                <p>点击上传图片，或将图片拖拽到此处</p>
            </div>
        </div>
        <div class="layui-input-inline">
            <div class="layui-upload-list" style="margin-top: 5px;">
                <img class="layui-upload-img headImage" style="height: 100px;" src="" id="detailurl">
                <p id="demoTexts"></p>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
{include file="public/footer" /}
<script src="/static/taginput/src/jquery.tagsinput-revisited.js"></script>
<script src="/static/layuimini/lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>

<script>
    var banner_url=[];
    var banner_url_before=[];
    $(function() {
        $('#form-tags-1').tagsInput({
            'delimiter': ',',
            placeholder: '添加标签,回车键添加下一个',
        });
        // var file_length=0;
        // // 初始化插件
        // $("#zyupload").zyUpload({
        //     width: "650px",                 // 宽度
        //     height: "200px",                 // 宽度
        //     itemWidth: "140px",                 // 文件项的宽度
        //     itemHeight: "115px",                 // 文件项的高度
        //     url: "/admin/Prize/Doupload",  // 上传文件的路径
        //     fileType: ["jpg", "png", "txt", "js", "exe","jpeg","mp4","mp3"],// 上传文件的类型
        //     fileSize: 51200000,                // 上传文件的大小
        //     multiple: true,                    // 是否可以多个文件上传
        //     dragDrop: true,                    // 是否可以拖动上传文件
        //     tailor: false,                    // 是否可以裁剪图片
        //     del: true,                    // 是否可以删除文件
        //     finishDel: false,  				  // 是否在上传文件完成后删除预览
        //     /* 外部获得的回调接口 */
        //     onSelect: function (selectFiles, allFiles) {    // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
        //         file_length=allFiles.length;
        //         if(file_length>0){
        //             let line=Math.ceil(file_length/3);
        //             $("#boxs").height(350+120*line);
        //         }
        //     },
        //     onDelete: function (file, files) {              // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
        //         let key=banner_url_before.indexOf(file.name);
        //         if(key!=-1){
        //             banner_url.splice(key,1);
        //             banner_url_before.splice(key,1);
        //         }
        //         file_length--;
        //         if(file_length>0){
        //             let line=Math.ceil(file_length/3);
        //             $("#boxs").height(350+120*line);
        //         }else{
        //             $("#boxs").height(0);
        //         }
        //
        //     },
        //     onSuccess: function (file, response) {          // 文件上传成功的回调方法
        //        // $("#uploadInf").append("<p>上传成功，文件地址是：" + response + "</p>");
        //         response=JSON.parse(response)
        //         banner_url.push(response.src);
        //         banner_url_before.push(response.src);
        //     },
        //     onFailure: function (file, response) {          // 文件上传失败的回调方法
        //
        //     },
        //     onComplete: function (response) {           	  // 上传完成的回调方法
        //
        //     }
        // });
    });
    layui.use(['form','wangEditor','laydate','upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            wangEditor = layui.wangEditor,
            upload = layui.upload,
            laydate=layui.laydate,
            $ = layui.$;
        // 上架开始日期
        var insShelf = laydate.render({
            elem: '#start_time'
            , min: 0
            , calendar: true
            , type: 'datetime'
            , done: function (value, date) {
                //更新结束日期的最小日期
                insUnder.config.min = lay.extend({}, date, {
                    month: date.month - 1
                });

                //自动弹出结束日期的选择器
                //insUnder.config.elem[0].focus();
            }
        });
        //上架结束日期
        var insUnder = laydate.render({
            elem: '#end_time'
            , min: 0
            , calendar: true
            , type: 'datetime'
            , done: function (value, date) {
                //更新开始日期的最大日期
                insShelf.config.max = lay.extend({}, date, {
                    month: date.month - 1
                });
            }
        });
        //富文本


        //初始化编辑器数据
        // let info2 = "{$res.detail}";
        // let info3=$('<div>').html(info2).text()
        // editor.txt.html(info3)
        //element.init();
        //轮播图多图片上传
        upload.render({
            elem: '#multiple_banner',
            url: '/admin/Prize/Doupload',
            data: {
                'mark': 'img',
                'field': 'activeBanner',
                'oldSrc': ''
            },
            field: 'activeBanner',
            accept: 'images',
            acceptMime: 'image/*',
            multiple: true,
            before: function(obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#div-slide_show').append('<img src="' + result + '" alt="' + file.name +
                        '" title="点击删除" style="width: 100px;height: 100px" class="layui-upload-img" onclick="delMultipleImgs(this,\'banner\')">')
                });
            },
            done: function(res) {
                //如果上传成功
                if (res.status == true) {
                    //追加图片成功追加文件名至图片容器
                    banner_url.push(res.src);
                    $('#banner_images').val(banner_url);
                }
            },
            allDone: function(obj) {
                // console.log(obj.total); //得到总文件数
                // console.log(obj.successful); //请求成功的文件数
                // console.log(obj.aborted); //请求失败的文件数
            }
        });
        //单图片拖拽上传
        let uploadInst = upload.render({
            elem: '#headImg',
            url: '/admin/Prize/Doupload',
            size: 500,
            field: 'thumb_img',
            accept: 'images',
            acceptMime: 'image/*',
            before: function(obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#imgurl').attr('src', result); //图片链接（base64）;
                });
                this.data = {
                    'mark': 'img',
                    'field': 'thumb_img',
                    'oldSrc': $("#imgurlHidden").val()
                };
            },
            done: function(res) {
                //如果上传失败
                if (res.status == false) {
                    return layer.msg('上传失败');
                }
                //上传成功
                //打印后台传回的地址: 把地址放入一个隐藏的input中, 和表单一起提交到后台, 此处略..
                // window.parent.uploadHeadImage(res.src);
                $("#imgurlHidden").val(res.src);
                let demoText = $('#demoText');
                demoText.html('<span style="color: #8f8f8f;">上传成功!!!</span>');
            },
            error: function() {
                //演示失败状态，并实现重传
                let demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function() {
                    uploadInst.upload();
                });
            },

        });
        //单图片拖拽上传
        let uploaddetail = upload.render({
            elem: '#detailImg',
            url: '/admin/Prize/Doupload',
            size: 500,
            field: 'thumb_img',
            accept: 'images',
            acceptMime: 'image/*',
            before: function(obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#detailurl').attr('src', result); //图片链接（base64）;
                });
                this.data = {
                    'mark': 'img',
                    'field': 'thumb_img',
                    'oldSrc': $("#detailHidden").val()
                };
            },
            done: function(res) {
                //如果上传失败
                if (res.status == false) {
                    return layer.msg('上传失败');
                }
                //上传成功
                //打印后台传回的地址: 把地址放入一个隐藏的input中, 和表单一起提交到后台, 此处略..
                // window.parent.uploadHeadImage(res.src);
                $("#detailHidden").val(res.src);
                let demoText = $('#demoTexts');
                demoText.html('<span style="color: #8f8f8f;">上传成功!!!</span>');
            },
            error: function() {
                //演示失败状态，并实现重传
                let demoText = $('#demoTexts');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function() {
                    uploadInst.upload();
                });
            },

        });
        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            if(this.checked){
                this.value=1;
            }else{
                this.value=2;
            }
        });
        form.on('radio(pro_type)',function(data){
            let str='';
            $("#period").css("display","none")
            if(data.value==1){
                str="<label class=\"layui-form-label\">金额</label>\n" +
                    "        <div class=\"layui-input-block\">\n" +
                    "            <input type=\"number\" name=\"pro_number\" min=\"0\" lay-verify=\"required\"  value=\"\" class=\"layui-input\" autocomplete='off'>\n" +
                    "        </div>";
            }else if(data.value==2){
                str="<label class=\"layui-form-label\">数量</label>\n" +
                    "        <div class=\"layui-input-block\">\n" +
                    "            <input type=\"number\" name=\"pro_number\" min=\"1\" lay-verify=\"required\"  value=\"\" class=\"layui-input\" autocomplete='off'>\n" +
                    "        </div>";
            }else{
                str="<label class=\"layui-form-label\">选择卡券</label>\n" +
                    "        <div class=\"layui-input-block\" style=\"display: flex\">\n" +
                    "            <button class=\"layui-btn\" onclick=\"checkVoucher()\">点击添加</button>\n" +
                    "            <input type=\"hidden\" name=\"voucher_id\" id=\"voucher_id\">\n" +
                    "            <div style=\"margin-left:10px;padding-top:10px;\" id=\"voucherShow\"></div>\n" +
                    "        </div>";
                $("#period").css("display","block")
            }
            $("#showContext").html(str);
        })
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            //data.field.detailurl=editor.txt.html();
            $.ajax({
                url: "/admin/Active/integral_exchange_add?action=ajax",
                type: 'post',
                async: true,
                data: data.field,
                dataType: 'json',
                success: function (res) {
                    if(res.status){
                        parent.layer.msg("操作成功!", {icon:1,time: 1000}, function () {
                            //重新加载父页面
                            parent.location.reload();
                        });
                        return;
                    }else{
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
    });
    /**
     * @context 卡券列表
     */
    var voucherOpen;
    function checkVoucher()
    {
        $.ajax({
            url: "/admin/Prize/getsPrizeVoucherList",
            type: 'post',
            async: true,
            data: {},
            dataType: 'json',
            success: function (res) {
                voucherOpen=layer.open({
                    type: 1 ,
                    title: "卡券列表",
                    area: ['800px', '500px'],
                    shade: 0.5,
                    maxmin: true,
                    content:res.data,
                    success:function(layero,index){
                        // 禁止回车键打开弹窗
                        $(":focus").blur();
                    }
                })
                return false;
            }
        });
    }
    /**
     * @context 选择卡券
     * @param id
     * @param title
     * @param price
     */
    function chooseVoucher(id,title,price)
    {
        $("#voucher_id").val(id);
        $("#voucher_title").val(title);
        $("#voucherShow").html(title+"    ￥"+price);
        layer.close(voucherOpen);
    }

    /**
     *
     * @context 删除图片
     * @param this_img
     * @param type
     */
    function delMultipleImgs(this_img, type) {
        //获取下标
        var subscript = $("#div-slide_show img").index(this_img);
        //删除图片
        this_img.remove();
        if (type == 'banner') {
            //删除轮播图数组
            banner_url.splice(subscript, 1);
            $('#banner_images').val(banner_images);
        } else {
            //删除详情图数组
            picurl_images.splice(subscript, 1);
            $('#picurl_images').val(picurl_images);
        }
        //返回
        return;
    }
</script>
</body>
</html>